<template>
  <div class="add-company-page">
    <a-spin :spinning="loading">
      <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="保险公司" name="name" :rules="[{ required: true, message: '请输入保险公司', trigger: 'change' }]">
              <a-input v-model:value="formState.name" :disabled="type === 2" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="出仓代理" name="agentIdList" :rules="[{ required: true, message: '请选择出仓代理!' }]">
              <a-select v-model:value="formState.agentIdList" placeholder="请选择" mode="multiple">
                <a-select-option v-for="item in channelOpts" :key="item.consValue" :value="item.id" :label="item.name">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="12">
          <a-form-item label="导入文件" name="agentIdList">
            <a-upload v-model:fileList="formState.fileList" name="file" :customRequest="uploadRequestHandle">
              <a-button>上传</a-button>
            </a-upload>
          </a-form-item>
        </a-col> -->
        </a-row>

        <a-row>
          <a-col :span="24">
            <span class="value-title">货值限制：</span>
          </a-col>
          <template v-for="(item, index) in formState.goodLimitResList" :key="index">
            <a-col :span="5">
              <a-form-item label="国家" :name="['goodLimitResList', index, 'countryId']" :rules="[{ required: true, message: '请选择国家!' }]">
                <a-select v-model:value="item.countryId" placeholder="请选择" @change="(e:string)=> channelOptsHandle(e,item)">
                  <a-select-option v-for="e in countryOpts" :key="e.id" :value="e.id" :label="e.name">{{ e.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="5">
              <a-form-item label="渠道" :name="['goodLimitResList', index, 'channelIdList']" :rules="[{ required: true, message: '请选择渠道!' }]">
                <a-cascader
                  v-model:value="item.channelIdList"
                  showSearch
                  :options="(item as any).channelOpts "
                  placeholder="请选择"
                  multiple
                  :max-tag-count="2"
                  @dropdownVisibleChange="(boolean:boolean)=>dropdownVisibleChange(boolean,item)"
                  :showCheckedStrategy="SHOW_CHILD"
                />
              </a-form-item>
            </a-col>

            <a-col :span="5">
              <a-form-item label="单位" :name="['goodLimitResList', index, 'goodLimitUnit']" :rules="[{ required: true, message: '请选择单位!' }]">
                <a-select v-model:value="item.goodLimitUnit" placeholder="请选择">
                  <a-select-option :value="'票'">票</a-select-option>
                  <a-select-option :value="'件'">件</a-select-option>
                  <a-select-option :value="'KG'">KG</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="5">
              <a-form-item label="上限" :name="['goodLimitResList', index, 'goodValueLimit']">
                <a-input-number v-model:value="item.goodValueLimit" :min="1" :precision="0" />
              </a-form-item>
            </a-col>

            <a-col :span="4">
              <a-button @click="addHandle" style="margin-right: 8px" type="primary"><plus-outlined /></a-button>
              <a-button @click="deleteHandle(index)" v-if="(formState.goodLimitResList as []).length > 1" type="primary" danger><minus-outlined /></a-button>
            </a-col>
          </template>
        </a-row>
      </a-form>

      <div class="submit-btn-form-item">
        <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>保 存</a-button>
        <a-button @click="resetForm">取 消</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";
import { getDetailApi } from "@/api/insuranceCompany";

import { TreeSelect } from "ant-design-vue";
const SHOW_CHILD = TreeSelect.SHOW_CHILD;
const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number; //1新增  2编辑
    passData: DepartmentPersonnel.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData, type } = toRefs(props);
const { tableData, formState, loading, formRef, getChannelApi, channelOpts, getCountryApi, countryOpts, selectValue } = InitHook();
const { onSubmit, resetForm, addHandle, deleteHandle, channelOptsHandle, getChennleHandle, dropdownVisibleChange } = OperationHook({
  visible,
  passData,
  tableData,
  formState,
  loading,
  formRef,
  emit,
  selectValue
});

const init = () => {
  loading.value = true;
  getChannelApi();
  getCountryApi();
  if (type.value === 2) {
    return getDetailApi(passData.value.id)
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          formState.goodLimitResList.map(async (t: any) => {
            await getChennleHandle(t.countryId, t);
            t.channelOpts.map((o: any) => {
              o.children.map((q: any) => {
                if (t.channelIdList.includes(q.value)) {
                  t.channelIdList.push([q.channelAllocation, q.value]);
                }
              });
            });
            t.channelIdList = t.channelIdList.filter((d: any) => Array.isArray(d));
          });
          if (!data.goodLimitResList) {
            formState.goodLimitResList = [
              {
                countryId: "",
                goodValueLimit: 0,
                channelIdList: [],
                goodLimitUnit: ""
              }
            ];
          }
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
  loading.value = false;
};

watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
      formState.goodLimitResList = [
        {
          countryId: "",
          goodValueLimit: 0,
          channelIdList: [],
          goodLimitUnit: ""
        }
      ];
      formState.id = "";
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.add-company-page {
  background-color: #fff;

  .operation-btn-wrapper {
    :deep(.ant-btn) {
      margin-right: 16px;
    }
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .value-title{
    font-size 15px
    font-weight:600
  }
}
</style>
